<template>
<div>
  <div style="padding: 15px">

      <el-row :gutter="10">

        <el-col :span="4" v-for="card in card_arr">
          <div style="margin-bottom: 15px">
          <el-card shadow="hover">
            <div>
              <span style="font-size: 16px;color: rgba(0,0,0,.45)">
              {{card.title}}
            </span>
              <el-tooltip popper-class="my-item" effect="dark" :content="card.tooltip" placement="top">
                <i class="el-icon-warning-outline" style="float: right"></i>
              </el-tooltip>
            </div>
            <div style="margin-top: 20px">
              <span style="font-size: 30px">
                ￥{{card.number}}
              </span>
            </div>
          </el-card>
          </div>
        </el-col>
      </el-row>
  </div>
</div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      card_arr:[{
        title:'今日采购',
        number:'0',
        tooltip:'统计今日单据采购的总金额'
      },{
        title:'今日销售',
        number:'0',
        tooltip:'统计今日销售单据的总金额'
      },{
        title:'今日零售',
        number:'0',
        tooltip:'统计今日零售单据的总金额'
      },{
        title:'今日本月累计采购',
        number:'0',
        tooltip:'统计本月采购单据的总金额'
      },{
        title:'本月累计销售',
        number:'0',
        tooltip:'统计本月销售单据的总金额'
      },{
        title:'本月累计零售',
        number:'0',
        tooltip:'统计本月零售单据的总金额'
      },{
        title:'昨日采购',
        number:'0',
        tooltip:'统计昨日采购单据的总金额'
      },{
        title:'昨日销售',
        number:'0',
        tooltip:'统计昨日销售单据的总金额'
      },{
        title:'昨日零售',
        number:'0',
        tooltip:'统计昨日零售单据的总金额'
      },{
        title:'今年累计采购',
        number:'0',
        tooltip:'统计今年采购单据的总金额'
      },{
        title:'今年累计销售',
        number:'0',
        tooltip:'统计今年销售单据的总金额'
      },{
        title:'今年累计零售',
        number:'0',
        tooltip:'统计今年零售单据的总金额'
      }]
    }
  },
  methods:{

  }
}
</script>

<style>
.my-item{
  font-size: 14px;
}
</style>